<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <text class="header-title">城市探索</text>
      <view class="music-control" @tap="toggleMusic">
        <uni-icons :type="isMusicPlaying ? 'sound' : 'sound-mute'" size="20" color="#fff"></uni-icons>
      </view>
    </view>
    
    <!-- 轮播图 -->
    <swiper 
      autoplay 
      interval="3000" 
      circular 
      indicator-dots
      indicator-color="rgba(255,255,255,0.5)"
      indicator-active-color="#fff"
      class="swiper-container"
    >
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item" mode="aspectFill" class="banner-img"></image>
      </swiper-item>
    </swiper>
    
    <!-- 视频播放器 -->
    <view class="video-section">
      <text class="section-title">
        <uni-icons type="videocam" size="18" color="#1677ff"></uni-icons> 城市宣传片
      </text>
      <view class="video-container">
        <video 
          :src="videoSource" 
          class="video-player"
          poster="/static/city-video.mp3"
          :controls="true"
          id="cityVideo"
        ></video>
      </view>
    </view>
    
    <!-- 城市介绍 -->
    <view class="city-intro">
      <text class="section-title">
        <uni-icons type="location" size="18" color="#1677ff"></uni-icons> 泉州
      </text>
      <text class="intro-text">
        泉州，古称刺桐，是国务院首批历史文化名城、海上丝绸之路起点城市。
        它拥有众多历史文化遗迹，如老君岩、开元寺东西塔等，同时也是一个充满活力的现代城市，
        有着独特的闽南文化和丰富的美食。
      </text>
    </view>
    
    <!-- 探索进度 -->
    <view class="progress-box">
      <view class="progress-title">
        <text>
          <uni-icons type="compass" size="18" color="#1677ff"></uni-icons> 探索进度
        </text>
        <text>{{ exploreProgress }}%</text>
      </view>
      <progress 
        :percent="exploreProgress" 
        stroke-width="6"
        activeColor="#1677ff"
        backgroundColor="#e0e0e0"
      ></progress>
    </view>
    
    <!-- 城市选择器 -->
    <view class="picker-box">
      <picker mode="region" @change="handleRegionChange" :value="selectedRegion">
        <view class="picker-content">
          <text class="picker-label">
            <uni-icons type="map" size="18" color="#1677ff"></uni-icons> 当前城市
          </text>
          <text class="picker-value">{{ selectedRegion[1] || '选择城市' }}</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </picker>
    </view>
    
    <!-- 偏好设置 -->
    <view class="preference-box">
      <text class="section-title">
        <uni-icons type="settings" size="18" color="#1677ff"></uni-icons> 探索偏好
      </text>
      
      <!-- 出行方式选择 -->
      <view class="transport-options">
        <text class="option-label">出行方式：</text>
        <radio-group @change="handleTransportChange">
          <label class="radio-item" v-for="(item, index) in transportModes" :key="index">
            <radio :value="item.value" :checked="selectedTransport === item.value"></radio>
            <text>{{ item.label }}</text>
          </label>
        </radio-group>
      </view>
      
      <!-- 显示地标设置 -->
      <view class="switch-option">
        <text class="option-label">显示地标景点</text>
        <switch :checked="showLandmarks" @change="handleLandmarkChange" color="#1677ff"></switch>
      </view>
      
      <!-- 探索半径设置 -->
      <view class="slider-option">
        <text class="option-label">探索半径：{{ exploreRadius }}km</text>
        <slider 
          :value="exploreRadius" 
          @change="handleRadiusChange"
          min="1" 
          max="20"
          step="1"
          activeColor="#1677ff"
        ></slider>
      </view>
    </view>
    
    <!-- 热门景点 -->
    <view class="landmarks-box" v-if="showLandmarks">
      <text class="section-title">
        <uni-icons type="star" size="18" color="#1677ff"></uni-icons> 热门地标
      </text>
      <view class="landmarks-grid">
        <view 
          class="landmark-item" 
          v-for="(item, index) in landmarks" 
          :key="index"
          @tap="navigateToLandmark(item)"
        >
          <image :src="item.imgUrl" mode="aspectFill" class="landmark-img"></image>
          <text class="landmark-name">{{ item.name }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="action-bar">
      <button class="start-btn" @tap="startExploration" type="primary">
        <uni-icons type="paperplane" size="20" color="#fff"></uni-icons> 开始探索
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      banners: [
        '/static/city1.png',
        '/static/city2.jpg',
        '/static/city3.jpg',
      ],
      
      // 背景音乐
      musicSource: '/static/city-music.mp3',
      isMusicPlaying: false,
      audioContext: null,
      
      // 视频
      videoSource: '/static/city-video.mp4',
      
      // 探索进度
      exploreProgress: 60,
      
      // 选中的地区
      selectedRegion: ['福建省', '泉州市', ''],
      
      // 出行方式
      transportModes: [
        { label: '公交', value: 'bus' },
        { label: '自驾', value: 'drive' },
        { label: '步行', value: 'walk' }
      ],
      selectedTransport: 'bus',
      
      // 是否显示地标
      showLandmarks: true,
      
      // 探索半径
      exploreRadius: 10,
      
      // 地标数据
      landmarks: [
        {
          name: '西街',
          imgUrl: '/static/city1.png',
          id: 1
        },
        { 
          name: '老君岩', 
          imgUrl: '/static/city4.jpg',
          id: 2 
        },
        { 
          name: '洛阳桥', 
          imgUrl: '/static/city3.jpg',
          id: 3 
        },
        { 
          name: '清净寺', 
          imgUrl: '/static/city5.jpg',
          id: 4 
        }
      ]
    };
  },
  onLoad() {
    // 初始化音频上下文
    this.initAudio();
  },
  methods: {
    // 初始化音频
    initAudio() {
      this.audioContext = uni.createInnerAudioContext();
      this.audioContext.src = this.musicSource;
      this.audioContext.loop = true;
      this.audioContext.autoplay = false;
    },
    
    // 切换音乐播放状态
    toggleMusic() {
      this.isMusicPlaying = !this.isMusicPlaying;
      if (this.isMusicPlaying) {
        this.audioContext.play();
        uni.showToast({
          title: '背景音乐已开启',
          icon: 'none'
        });
      } else {
        this.audioContext.pause();
        uni.showToast({
          title: '背景音乐已关闭',
          icon: 'none'
        });
      }
    },
    
    // 处理地区选择变化
    handleRegionChange(e) {
      this.selectedRegion = e.detail.value;
      uni.showToast({
        title: `已切换到${e.detail.value[1]}`,
        icon: 'none'
      });
    },
    
    // 处理出行方式变化
    handleTransportChange(e) {
      this.selectedTransport = e.detail.value;
    },
    
    // 处理地标显示切换
    handleLandmarkChange(e) {
      this.showLandmarks = e.detail.value;
    },
    
    // 处理探索半径变化
    handleRadiusChange(e) {
      this.exploreRadius = e.detail.value;
    },
    
    // 导航到地标详情
    navigateToLandmark(item) {
      uni.navigateTo({
        url: `/pages/landmarkDetail/landmarkDetail?id=${item.id}`
      });
    },
    
    // 开始探索
    startExploration() {
      uni.showToast({
        title: '开始探索城市',
        icon: 'none'
      });
      
      // 模拟探索进度增加
      if (this.exploreProgress < 100) {
        this.exploreProgress += 5;
      }
    }
  },
  onUnload() {
    // 页面卸载时停止音乐
    if (this.audioContext) {
      this.audioContext.stop();
      this.audioContext.destroy();
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

/* 顶部导航 */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to right, #1677ff, #3498db);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-title {
  font-size: 20px;
  font-weight: 600;
}

.music-control {
  background: rgba(255, 255, 255, 0.2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 轮播图 */
.swiper-container {
  height: 220px;
  margin-top: 60px;
}

.banner-img {
  width: 100%;
  height: 100%;
}

/* 视频区域 */
.video-section {
  padding: 15px;
  background: #fff;
  margin: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.video-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: 200px;
}

.video-player {
  width: 100%;
  height: 100%;
}

/* 城市介绍 */
.city-intro {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  margin: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.intro-text {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

/* 进度条 */
.progress-box {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  margin: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.progress-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

/* 城市选择器 */
.picker-box {
  background: #fff;
  border-radius: 12px;
  padding: 0 15px;
  margin: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.picker-content {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #eee;
}

.picker-label {
  color: #333;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.picker-value {
  flex: 1;
  margin: 0 10px;
  color: #666;
  text-align: right;
  font-size: 16px;
}

/* 偏好设置 */
.preference-box {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  margin: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.transport-options {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.option-label {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.radio-item {
  margin-right: 20px;
  font-size: 14px;
  color: #666;
}

.switch-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.slider-option {
  display: flex;
  flex-direction: column;
}

/* 热门景点 */
.landmarks-box {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  margin: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.landmarks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.landmark-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.landmark-img {
  width: 100%;
  height: 120px;
}

.landmark-name {
  display: block;
  padding: 10px;
  text-align: center;
  color: #333;
  font-size: 14px;
  background: #f9f9f9;
}

/* 底部按钮 */
.action-bar {
  padding: 0 20px;
  margin-top: 20px;
}

.start-btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  background: linear-gradient(to right, #1677ff, #3498db);
  border-radius: 25px;
  box-shadow: 0 4px 15px rgba(22, 119, 255, 0.3);
}
</style>